// ==================== 1. 颜色变量 ====================
@primary-color: #313fa8;       // 主色调（蓝色）
@primary-light: #748EA6;      // 主色浅色调
@success-color: #67c23a;      // 成功色（绿色）
@warning-color: #e6a23c;      // 警告色（橙色）
@danger-color: #f56c6c;       // 危险色（红色）
@info-color: #909399;         // 信息色（灰色）

@primary-dark: #1060FF;        // 主色深色调（用于按钮激活态、边框）
@primary-light-2: #a3b3c6;     // 主色超浅色调（用于背景渐变）

// 辅助色（扩展功能模块色彩）
@secondary-purple: #7e57c2;    // 紫色（用于功能标签、辅助按钮）
@secondary-cyan: #00acc1;      // 青色（用于数据可视化、进度条）
@secondary-yellow: #ffb300;    // 黄色（用于提示、警告轻量化场景）
@secondary-pink: #ec407a;      // 粉红色（用于情感化功能、互动元素）

// 中性色阶（扩展文本/背景层次）
@neutral-100: #f5f7fa;         // 超浅灰（背景色）
@neutral-200: #e4e7ed;         // 浅灰（边框、分隔线）
@neutral-300: #c0c4cc;         // 中灰（次要文本、禁用状态）
@neutral-400: #909399;         // 深灰（主要文本、非激活状态）
@neutral-900: #1e2328;         // 近黑色（标题、强调文本）

// 状态色（扩展交互状态）
@status-loading: #909399;      // 加载中（骨架屏、加载指示器）
@status-disabled: #c0c4cc;     // 禁用态（按钮、输入框）
@status-pending: #e6a23c;      // 待处理（流程状态、任务标签）
@status-urgent: #ff4d4f;       // 紧急（通知、告警标签）

@text-color: #0E0E0E;            // 主文本色
@text-color-secondary: #66676C;  // 次要文本色
@text-color-primary: #18CA6E;    // 主色调文本
@text-color-light: #748EA6;      // 浅色文本
@bg-color: #fff;              // 背景色
@bg-color-light: #f5f7fa;     // 浅背景色
@border-color: #dcdfe6;       // 边框色


// ==================== 2. 字体定义 ====================
@font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
@font-size-xs: 12px;          // 超小字体
@font-size-sm: 14px;          // 小字体
@font-size-md: 16px;          // 中等字体
@font-size-lg: 18px;          // 大字体
@font-size-xl: 24px;          // 超大字体
@font-size-xxl: 32px;         // 特大字体

@font-weight-normal: 400;
@font-weight-medium: 500;
@font-weight-bold: 700;


// ==================== 3. 间距变量 ====================
@space-xs: 4px;               // 超小间距
@space-sm: 8px;               // 小间距
@space-md: 16px;              // 中等间距
@space-lg: 24px;              // 大间距
@space-xl: 32px;              // 超大间距
@space-xxl: 48px;             // 特大间距

@border-radius-sm: 4px;       // 小圆角
@border-radius-md: 8px;       // 中等圆角
@border-radius-lg: 12px;      // 大圆角
@border-radius-full: 50%;     // 圆形


// ==================== 4. 容器宽度 ====================
@container-width: 1200px;     // 页面最大宽度
@container-padding: 20px;     // 容器内边距


// ==================== 5. 重置样式 ====================
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: @font-family;
  font-size: @font-size-md;
  line-height: 1.5;
  color: @text-color;
  background-color: @bg-color;
}

a {
  color: @primary-color;
  text-decoration: none;
  &:hover {
    color: @primary-light;
    //text-decoration: underline;
  }
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: @font-weight-medium;
  margin-bottom: @space-md;
}


// ==================== 6. 工具类 ====================
// 清除浮动
.clearfix() {
  &::before,
  &::after {
    content: "";
    display: table;
  }
  &::after {
    clear: both;
  }
}
// global.less 或 App.vue 全局样式
html, body {
  margin: 0;
  padding: 0;
  // 明确设置基础字体大小，建议用相对单位（如 rem 适配）
  //font-size: 14px;
  font-family: "Microsoft YaHei", sans-serif; // 统一字体
}
// Flex 布局
.flex() {
  display: flex;
}

.flex-column() {
  display: flex;
  flex-direction: column;
}

.flex-row() {
  display: flex;
  flex-direction: row;
}

.flex-center() {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between() {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

// 文本工具类
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 间距工具类
.mt(@value) { margin-top: @value; }
.mb(@value) { margin-bottom: @value; }
.ml(@value) { margin-left: @value; }
.mr(@value) { margin-right: @value; }
.mx(@value) { margin-left: @value; margin-right: @value; }
.my(@value) { margin-top: @value; margin-bottom: @value; }
.pa(@value) { padding: @value; }
.pt(@value) { padding-top: @value; }
.pb(@value) { padding-bottom: @value; }
.pl(@value) { padding-left: @value; }
.pr(@value) { padding-right: @value; }
.px(@value) { padding-left: @value; padding-right: @value; }
.py(@value) { padding-top: @value; padding-bottom: @value; }

// 响应式工具类（示例，可根据需求扩展）
@mobile-breakpoint: 768px;
@tablet-breakpoint: 1024px;

@media (max-width: @mobile-breakpoint) {
  .mobile-hide {
    display: none;
  }
}

@media (min-width: @tablet-breakpoint) {
  .tablet-show {
    display: block;
  }
}
// ==================== 6. 工具类 扩展 ====================
// Flex 布局补充
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-around { justify-content: space-around; }

// 垂直对齐
.align-top { align-items: flex-start; }
.align-middle { align-items: center; }
.align-bottom { align-items: flex-end; }

// 文本工具类
.text-bold { font-weight: @font-weight-bold; }
.text-muted { color: @text-color-light; }
/* 两行文本省略样式 */
.text-2-line-ellipsis {
  /* 核心属性 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  /* 兼容性补充 */
  text-overflow: ellipsis;
  word-break: break-word;
  white-space: normal;

  /* 可选：自定义省略号样式 */
  /* 注意：部分浏览器不支持自定义省略号，这是一个实验性属性 */
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;

  /* 防止长英文单词溢出 */
  word-wrap: break-word;
}
.text-1-line-ellipsis {
  /* 核心属性：单行省略 */
  display: block; /* 或者 inline-block，根据布局需求调整 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 强制文本在一行显示 */

  /* 兼容性补充（可选，现代浏览器一般已支持基础单行省略） */
  word-break: break-word;
}
// 响应式工具类
@media (max-width: @mobile-breakpoint) {
  .mobile-hide { display: none !important; }
  .mobile-show { display: block !important; }
}
@media (min-width: @tablet-breakpoint) {
  .desktop-only { display: block !important; }
}

// ==================== 7. 阴影系统 ====================
@shadow-base: 0 2px 8px rgba(0,0,0,0.03);
@shadow-hover: 0 4px 16px rgba(0,0,0,0.08);

// 工具类
.shadow { box-shadow: @shadow-base; }
.shadow-hover {
  transition: all 0.3s ease;
  &:hover {
    box-shadow: @shadow-hover;
    transform: translateY(-2px);
  }
}

// ==================== 8. 交互动效 ====================
// 交互动效变量
@transition: all 0.3s ease; // 基础过渡动画
// 基础过渡
.transition-base() {
  transition: all 0.3s ease;
}

// 卡片悬停效果
.card-hover() {
  .transition-base();
  &:hover {
    box-shadow: @shadow-hover;
    transform: translateY(-2px);
  }
}


.btn-glow {
  padding: 12px 24px;
  border: none;
  color: white;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  position: relative;
  overflow: hidden;
  transition:
          transform 0.4s,
          box-shadow 0.4s;
}

.btn-glow:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px #9dbbf5;
}

.btn-glow::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: 0.5s;
}

.btn-glow:hover::before {
  left: 100%;
}
.btn-success-glow {
  padding: 12px 24px;
  border: none;
  color: white;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  position: relative;
  overflow: hidden;
  transition:
          transform 0.4s,
          box-shadow 0.4s;
}

.btn-success-glow:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px #aaeec4;
}

.btn-success-glow::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: 0.5s;
}

.btn-success-glow:hover::before {
  left: 100%;
}